import { defineStore } from "pinia";
import { useChangeColor } from "@/utils/theme";
const { getLightColor, getDarkColor } = useChangeColor();
// userInfo 存储对象的名称
export const useUser: any = defineStore("userInfo", {
  // state是一个函数，返回一个对象
  state: () => {
    return {
      colorActive: "#409eff", //页面初始变量
      userName: "", //用户名称
      token: "", //用户token
      avatar: "", //用户头像
    };
  },
  getters: {
    // 派生状态：获取用户名长度
    userNameLength(state: any) {
      return state.userName.length;
    },
  },
  actions: {
    // 退出登录
    logOut() {
      this.userName = "";
      this.token = "";
      this.avatar = "";
      this.colorActive = "#409eff";
      this.changeColor("#409eff");
    },
    // 登录
    async loginSubmit(value: any) {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      this.userName = value.userName;
      this.token = value.token;
      this.avatar = value.avatar;
    },
    // 同步修改主题色
    changeColor(color: any) {
      const el = document.documentElement;
      el.style.setProperty("--el-color-primary", color);
      el.style.setProperty(
        "--el-color-primary-dark-2",
        `${getDarkColor(color, 0.1)}`
      );
      for (let i = 1; i <= 9; i++) {
        el.style.setProperty(
          `--el-color-primary-light-${i}`,
          `${getLightColor(color, i / 10)}`
        );
      }
      this.colorActive = color;
    },
    // 修改用户某一项的参数
    updataUser(data: any) {
      // 修改头像链接
      console.log(data);
    },
  },
  persist: true, //持久化存储只有数据发生改变的是后才会存储
});
// 使用说明 import { storeToRefs } from 'pinia'  import { useUser } from "@/store/modules/userInfo" const userStore = useUser()   const { userName, avatar } = storeToRefs(userStore) userStore.changeUserName("New UserName")
